<template>
  <div>
    <el-button-group style="margin-bottom: 15px">
      <el-button type="primary" @click="drawer = true">新增</el-button>
    </el-button-group>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        fixed
        type="index"
        width="50"
        label="#"
      ></el-table-column>
      <el-table-column prop="name" label="题目" width="600"> </el-table-column>
      <el-table-column prop="gender" label="分类" width="120">
      </el-table-column>
      <el-table-column prop="age" label="作者" width="120"> </el-table-column>
      <el-table-column prop="loginName" label="发布时间" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="warning">详情</el-button>
          <el-button @click="updateClk(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="removeClk(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      size="50%"
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
    >
      <el-page-header style="margin: 15px" title="返回" @back="drawer = false">
      </el-page-header>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="题目">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.cid" placeholder="请选择">
            <el-option
              v-for="(val, key) in classifyList"
              :key="key"
              :label="val"
              :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项">
          <el-checkbox-group v-model="form.answers">
            <div v-for="(item, index) in form.options" :key="index">
              <el-checkbox :label="item.text"></el-checkbox>
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="item.value"
              >
              </el-input>
              <el-button
                v-if="index == form.options.length - 1 && letter <= 89"
                type="success"
                size="small"
                style="margin-left: 10px; height: 33px"
                icon="el-icon-plus"
                circle
                @click="doAddOptions"
              ></el-button>
              <el-button
                class="deleteBtn"
                v-if="index > 3"
                type="danger"
                size="small"
                style="height: 33px"
                icon="el-icon-minus"
                circle
                @click="doDeleteOptions"
              ></el-button>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="答案">
          <div>{{ doSort(form.answers).join(",") }}</div>
        </el-form-item>
        <el-form-item label="答案提示">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.tips"
          >
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      drawer: false,
      tableData: [],
      form: {
        answers: [],
        options: [
          { text: "A", value: "" },
          { text: "B", value: "" },
          { text: "C", value: "" },
          { text: "D", value: "" },
        ],
      },
      letter: 68,
    };
  },
  mounted() {
    this.getClassify();
  },
  methods: {
    ...mapActions("test", ["getClassify"]),
    onSubmit() {
      let form = this.form;
      console.log({ ...form, answers: this.doSort(form.answers) });
    },
    doSort(arr) {
      return [...arr].sort();
    },
    doAddOptions() {
      if (this.letter > 89) {
        return;
      }
      this.letter++;
      this.form.options.push({
        text: String.fromCharCode(this.letter),
        value: "",
      });
    },
    doDeleteOptions() {
      this.letter--;
      this.form.options.pop();
      let form = this.form;
      form.answers.forEach((answer) => {
        let isTure = false;
        form.options.forEach((option) => {
          if (answer == option.text) {
            isTure = true;
          }
        });
        if (!isTure) {
          form.answers.splice(form.answers.indexOf(answer), 1);
        }
      });
    },
  },
  computed: {
    ...mapGetters("test", ["classifyList"]),
  },
};
</script>

<style scoped>
.el-checkbox-group > div {
  display: flex;
  align-items: center;
}

.el-checkbox-group > div > .el-textarea {
  margin-left: 13px;
  width: 80%;
}

.el-checkbox-group > div > .deleteBtn {
  margin-left: 10px;
}

/deep/.el-drawer.rtl {
  overflow-y: scroll;
  height: 100%;
}
</style>